<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易新用户注册页面</title>
    <link rel="stylesheet" href="css/register.css"/>
    <script src="js/jquery-1.12.4.js"></script>
</head>

<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
    <form id="registerForm" action="" method="post" name="myform">
        <dl>
            <dt>通行证用户名：</dt>
            <dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd>
            <dd>
                <div id="userNameId"></div>
            </dd>
        </dl>
        <dl>
            <dt>登录密码：</dt>
            <dd><input type="password" id="pwd" class="inputs"/></dd>
            <dd>
                <div id="pwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>重复登录密码：</dt>
            <dd><input type="password" id="repwd" class="inputs"/></dd>
            <dd>
                <div id="repwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>性别：</dt>
            <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value=""/>女
            </dd>
        </dl>
        <dl>
            <dt>真实姓名：</dt>
            <dd><input type="text" id="realName" class="inputs"/></dd>
        </dl>
        <dl>
            <dt>昵称：</dt>
            <dd><input type="text" id="nickName" class="inputs"/></dd>
            <dd>
                <div id="nickNameId"></div>
            </dd>
        </dl>
        <dl>
            <dt>关联手机号：</dt>
            <dd><input type="text" id="tel" class="inputs"/></dd>
            <dd>
                <div id="telId"></div>
            </dd>
        </dl>
        <dl>
            <dt>保密邮箱：</dt>
            <dd><input type="email" id="email" class="inputs"/></dd>
            <dd>
                <div id="emailId"></div>
            </dd>
        </dl>
        <dl>
            <dt></dt>
            <dd><input name=" " type="image" src="images/button.gif"/></dd>
        </dl>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $("#userName").focus(function () {//获取焦点
            $("#userNameId").removeClass().addClass("import_prompt").text("请输入用户名");
        }).blur(function () {//失去焦点
            //1。由字母、数字、下划线、点、减号组成<br>
            //2.只能以数字、字母开头或结尾、且长度为4-18
            if (/^[a-zA-Z0-9][a-zA-Z0-9._-]{2,16}[a-zA-Z0-9]$/.test(this.value)) {
                //正确
                $("#userNameId").removeClass().addClass("ok_prompt").text("用户名输入正确")
            } else {
                //错误
                $("#userNameId").removeClass().addClass("error_prompt").html(
                    "1.由字母、数字、下划线、点、减号组成<br>\n" +
                    "        2.只能以数字、字母开头或结尾、且长度为4-18")
            }
        })

        //密码
        $("#pwd").focus(function () {//获取焦点
            $("#pwdId").removeClass().addClass("import_prompt").text("请输入密码");
        }).blur(function () {//失去焦点
            //验证
            if (/^.{6,16}$/.test(this.value)) {
                //正确
                $("#pwdId").removeClass().addClass("ok_prompt").text("密码输入正确")
            } else {
                //错误
                $("#pwdId").removeClass().addClass("error_prompt").html("密码不能为空，且长度6-16位")
            }
        })

        //确认密码
        $("#repwd").focus(function () {//获取焦点
            $("#repwdId").removeClass().addClass("import_prompt").text("请输入密码");
        }).blur(function () {//失去焦点
            //验证
            if (this.value==$("#pwd").val()) {
                //正确
                $("#repwdId").removeClass().addClass("ok_prompt").text("密码输入正确")
            } else {
                //错误
                $("#repwdId").removeClass().addClass("error_prompt").html("两次密码不一致")
            }
        })

        //昵称
        $("#nickName").focus(function () {//获取焦点
            $("#nickNameId").removeClass().addClass("import_prompt").text("请输入昵称");
        }).blur(function () {//失去焦点
            //验证
            //把汉字替换层两个字符
            let nickName = this.value.replace(/[\u2E80-\u9FFF]/g,"aa");
            if (/^.{4,20}$/.test(nickName)) {
                //正确
                $("#nickNameId").removeClass().addClass("ok_prompt").text("昵称输入正确")
            } else {
                //错误
                $("#nickNameId").removeClass().addClass("error_prompt").html("昵称输入错误，昵称有汉字、字母、数字、下划线、@、！、#、$、%、&、*等特殊符号组成,长度4-20位")
            }
        })
        //邮箱
        $("#email").focus(function () {//获取焦点
            $("#emailId").removeClass().addClass("import_prompt").text("请输入邮箱");
        }).blur(function () {//失去焦点
            //验证
            if (/^([a-z0-9_-]{3,12})@([\da-z-]{2,6})\.([a-z\.]{2,6})$/.test(this.value)) {
                //正确
                $("#emailId").removeClass().addClass("ok_prompt").text("邮箱输入正确")
            } else {
                //错误
                $("#emailId").removeClass().addClass("error_prompt").html("邮箱格式不正确")
            }
        })
    })

</script>
</body>
</html>
